Reactμ μ€νμ μΈ experimental_useCache ν μ μ¬μ©νμ¬ ν¨κ³Όμ μΈ μΊμ ν€ κ΄λ¦¬ λ°©λ²μ μ¬μΈ΅ λΆμν©λλ€. κΈλ‘λ² μ ν리μΌμ΄μ μ μ±λ₯κ³Ό λ°μ΄ν° κ°μ Έμ€κΈ°λ₯Ό μ΅μ ννμΈμ.
Reactμ experimental_useCache ν μ νμ©ν μΊμ ν€ κ΄λ¦¬ λ§μ€ν°νκΈ°
λμμμ΄ μ§ννλ νλ μΉ κ°λ° νκ²½μμ μ±λ₯μ κ°μ₯ μ€μν©λλ€. Reactλ‘ κ΅¬μΆλ μ ν리μΌμ΄μ
μ κ²½μ°, ν¨μ¨μ μΈ λ°μ΄ν° κ°μ Έμ€κΈ°μ μν κ΄λ¦¬λ λΆλλ½κ³ λ°μμ±μ΄ λ°μ΄λ μ¬μ©μ κ²½νμ μ 곡νλ λ° λ§€μ° μ€μν©λλ€. Reactκ° κ³μ νμ ν¨μ λ°λΌ, λ―Έλμ λͺ¨λ² μ¬λ‘λ₯Ό μμνλ μ€νμ μΈ κΈ°λ₯λ€μ΄ μ’
μ’
λ±μ₯ν©λλ€. κ·Έλ¬ν κΈ°λ₯ μ€ νλμΈ experimental_useCacheλ μΊμ ν€ κ΄λ¦¬λ₯Ό ν΅μ¬μΌλ‘ νλ μΊμ λ°μ΄ν° κ΄λ¦¬λ₯Ό μν κ°λ ₯νκ³ μλ‘μ΄ ν¨λ¬λ€μμ λμ
ν©λλ€.
μ΄ μ’
ν© κ°μ΄λμμλ Reactμ experimental_useCache ν
μ λ§₯λ½μμ μΊμ ν€ κ΄λ¦¬μ 볡μ‘μ±μ κΉμ΄ νκ³ λ€ κ²μ
λλ€. ν¨κ³Όμ μΈ μΊμ ν€ μ λ΅μ΄ μ νμμ μΈμ§, experimental_useCacheκ° μ΄λ₯Ό μ΄λ»κ² μ΄μ§νλμ§ μ΄ν΄λ³΄κ³ , React μ ν리μΌμ΄μ
μ μ΅μ ννλ €λ μ μΈκ³ μ¬μ©μλ₯Ό μν μ€μ©μ μΈ μμ μ μ€ν κ°λ₯ν ν΅μ°°λ ₯μ μ 곡ν κ²μ
λλ€.
μΊμ ν€ κ΄λ¦¬μ μ€μμ±
experimental_useCacheμ ꡬ체μ μΈ λ΄μ©μ μ΄ν΄λ³΄κΈ° μ μ, μΊμ ν€λ₯Ό ν¨κ³Όμ μΌλ‘ κ΄λ¦¬νλ κ²μ΄ μ κ·Έν λ‘ μ€μνμ§ μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. μΊμ±μ λ³Έμ§μ μΌλ‘ μμ£Ό μ κ·Όνλ λ°μ΄ν°λ₯Ό μμ μμΉ(μΊμ)μ μ μ₯νμ¬ νμ μμ²μ μλλ₯Ό λμ΄λ κ³Όμ μ
λλ€. μ¬μ©μκ° μ΄λ―Έ μΊμμ μλ λ°μ΄ν°λ₯Ό μμ²νλ©΄, μλ³Έ μμ€(μ: API)μμ κ°μ Έμ€λ κ²λ³΄λ€ ν¨μ¬ λΉ λ₯΄κ² μ 곡λ μ μμ΅λλ€.
κ·Έλ¬λ μΊμμ ν¨κ³Όλ ν€κ° μΌλ§λ μ κ΄λ¦¬λλμ§μ μ§μ μ μΌλ‘ κ΄λ ¨μ΄ μμ΅λλ€. μΊμ ν€λ νΉμ λ°μ΄ν° μ‘°κ°μ λν κ³ μ μλ³μμ λλ€. κ° μ± μ κ³ μ ν ISBNμ΄ μλ λμκ΄μ μμν΄ λ³΄μΈμ. νΉμ μ± μ μ°Ύκ³ μΆμ λ ISBNμ μ¬μ©ν©λλ€. λ§μ°¬κ°μ§λ‘ μΊμ±μμ μΊμ ν€λ μ°λ¦¬κ° νμλ‘ νλ μ νν λ°μ΄ν°λ₯Ό κ²μν μ μκ² ν΄μ€λλ€.
λΉν¨μ¨μ μΈ μΊμ ν€ κ΄λ¦¬μ λ¬Έμ μ
λΉν¨μ¨μ μΈ μΊμ ν€ κ΄λ¦¬λ λ€μκ³Ό κ°μ μ¬λ¬ λ¬Έμ λ‘ μ΄μ΄μ§ μ μμ΅λλ€:
- μ€λλ λ°μ΄ν°: μΊμ ν€κ° λ°μ΄ν°λ₯Ό κ°μ Έμ€λ λ° μ¬μ©λ λ§€κ°λ³μλ₯Ό μ ννκ² λ°μνμ§ μμΌλ©΄, μ¬μ©μμκ² μ€λλ μ 보λ₯Ό μ 곡ν μ μμ΅λλ€. μλ₯Ό λ€μ΄, μ¬μ©μμ IDλ₯Ό ν€μ ν¬ν¨νμ§ μκ³ μ¬μ©μ νλ‘ν λ°μ΄ν°λ₯Ό μΊμνλ©΄, μ€μλ‘ ν μ¬μ©μμ νλ‘νμ λ€λ₯Έ μ¬μ©μμκ² λ³΄μ¬μ€ μ μμ΅λλ€.
- μΊμ 무ν¨ν λ¬Έμ : κΈ°λ³Έ λ°μ΄ν°κ° λ³κ²½λλ©΄ μΊμλ₯Ό μ λ°μ΄νΈνκ±°λ 무ν¨νν΄μΌ ν©λλ€. μλͺ» μ€κ³λ ν€λ μ΄λ€ μΊμ νλͺ©μ΄ μν₯μ λ°λμ§ μκΈ° μ΄λ ΅κ² λ§λ€μ΄ λ°μ΄ν° λΆμΌμΉλ₯Ό μ΄λν μ μμ΅λλ€.
- μΊμ μ€μΌ: λ무 κ΄λ²μνκ±°λ μΌλ°μ μΈ μΊμ ν€λ μΊμκ° μ€λ³΅λκ±°λ κ΄λ ¨ μλ λ°μ΄ν°λ₯Ό μ μ₯νκ² λ§λ€μ΄ κ·μ€ν λ©λͺ¨λ¦¬λ₯Ό μ°¨μ§νκ³ , μ ννκ³ κ΅¬μ²΄μ μΈ λ°μ΄ν°λ₯Ό μ°ΎκΈ° λ μ΄λ ΅κ² λ§λ€ μ μμ΅λλ€.
- μ±λ₯ μ ν: μλλ₯Ό λμ΄λ λμ , μλͺ» κ΄λ¦¬λ μΊμλ λ³λͺ© νμμ μμΈμ΄ λ μ μμ΅λλ€. μ ν리μΌμ΄μ μ΄ μ λλμ§ μμ μΊμμμ μ¬λ°λ₯Έ λ°μ΄ν°λ₯Ό μ°Ύλ λ° λ무 λ§μ μκ°μ μλΉνκ±°λ, μ§μμ μΌλ‘ λ°μ΄ν°μ ν° λ©μ΄λ¦¬λ₯Ό 무ν¨νν΄μΌ νλ€λ©΄ μ±λ₯μμ μ΄μ μ μ¬λΌμ§λλ€.
- λ€νΈμν¬ μμ² μ¦κ°: μλͺ»λ ν€ κ΄λ¦¬λ‘ μΈν΄ μΊμκ° μ λ’°ν μ μκ² λλ©΄, μ ν리μΌμ΄μ μ μλ²μμ λ°λ³΅μ μΌλ‘ λ°μ΄ν°λ₯Ό κ°μ Έμ€κ² λμ΄ μΊμ±μ λͺ©μ μ체λ₯Ό 무μλ―Ένκ² λ§λλλ€.
μΊμ ν€μ λν κΈλ‘λ² κ³ λ €μ¬ν
μ μΈκ³ μ¬μ©μ κΈ°λ°μ κ°μ§ μ ν리μΌμ΄μ μ κ²½μ°, μΊμ ν€ κ΄λ¦¬λ λμ± λ³΅μ‘ν΄μ§λλ€. λ€μ μμλ€μ κ³ λ €ν΄ λ³΄μΈμ:
- νμ§ν λ° κ΅μ ν (i18n/l10n): μ ν리μΌμ΄μ μ΄ μ¬λ¬ μΈμ΄λ‘ μ½ν μΈ λ₯Ό μ 곡νλ κ²½μ°, μλ₯Ό λ€μ΄ μ ν μ€λͺ μ λν μΊμ ν€λ μΈμ΄ μ½λλ₯Ό ν¬ν¨ν΄μΌ ν©λλ€. μλ¬Έ μ ν μ€λͺ μ κ°μ Έμμ μμ΄λ₯Ό μ§μ νμ§ μλ ν€λ‘ μΊμνλ©΄, νλμ€μ΄λ₯Ό κΈ°λνλ μ¬μ©μμκ² μλͺ»λ μΈμ΄λ₯Ό μ 곡ν μ μμ΅λλ€.
- μ§μλ³ λ°μ΄ν°: μ ν μ¬κ³ , κ°κ²©, μ¬μ§μ΄ μΆμ² μ½ν μΈ κΉμ§ μ§μλ³λ‘ λ€λ₯Ό μ μμ΅λλ€. μΊμ ν€λ μ¬μ©μκ° κ΄λ ¨ μ 보λ₯Ό λ³Ό μ μλλ‘ μ΄λ¬ν μ§μμ μ°¨μ΄λ₯Ό κ³ λ €ν΄μΌ ν©λλ€.
- μκ°λ: μ΄λ²€νΈ μΌμ μ΄λ μ£Όκ°μ κ°μ μκ°μ λ―Όκ°ν λ°μ΄ν°μ κ²½μ°, λ°μ΄ν°κ° ν΄λΉ μκ°λλ₯Ό κΈ°μ€μΌλ‘ νμλλ€λ©΄ μ¬μ©μμ νμ§ μκ°λκ° μΊμ ν€μ μΌλΆκ° λμ΄μΌ ν μ μμ΅λλ€.
- μ¬μ©μλ³ μ νΈλ: κ°μΈνλ μ°Έμ¬μ ν΅μ¬μ λλ€. μ¬μ©μμ μ νΈλ(μ: λ€ν¬ λͺ¨λ, λμ€νλ μ΄ λ°λ)κ° λ°μ΄ν° νμ λ°©μμ μν₯μ λ―ΈμΉλ€λ©΄, μ΄λ¬ν μ νΈλλ₯Ό μΊμ ν€μ ν΅ν©ν΄μΌ ν μ μμ΅λλ€.
Reactμ experimental_useCache ν μκ°
Reactμ μ€νμ μΈ κΈ°λ₯λ€μ μ’
μ’
λ κ°λ ₯νκ³ ν¨μ¨μ μΈ ν¨ν΄μ κΈΈμ μ΄μ΄μ€λλ€. experimental_useCacheλ μμ§ μμ μ μΈ APIκ° μλλ©° κ·Έ μ νν ννλ λ³κ²½λ μ μμ§λ§, κ·Έ μ리λ₯Ό μ΄ν΄νλ©΄ Reactμμ λ°μ΄ν° μΊμ±μ λν λ―Έλμ λͺ¨λ² μ¬λ‘μ λν κ·μ€ν ν΅μ°°λ ₯μ μ»μ μ μμ΅λλ€.
experimental_useCacheμ ν΅μ¬ μμ΄λμ΄λ μ»΄ν¬λνΈ λ΄μμ μ§μ λ°μ΄ν° κ°μ Έμ€κΈ° λ° μΊμ±μ κ΄λ¦¬νλ λ μ μΈμ μ΄κ³ ν΅ν©λ λ°©λ²μ μ 곡νλ κ²μ
λλ€. μ΄λ μλ μΊμ± μ루μ
κ³Ό κ΄λ ¨λ λ§μ μμ©κ΅¬ μ½λλ₯Ό μΆμννμ¬ λ°μ΄ν° κ°μ Έμ€κΈ°, λ‘λ© μν μ²λ¦¬, μ€λ₯ μ²λ¦¬, κ·Έλ¦¬κ³ κ²°μ μ μΌλ‘ μΊμ± κ³Όμ μ λ¨μννλ κ²μ λͺ©νλ‘ ν©λλ€.
μ΄ ν μ μΌλ°μ μΌλ‘ λ‘λ ν¨μμ μΊμ ν€λ₯Ό μΈμλ‘ λ°μ΅λλ€. λ‘λ ν¨μλ λ°μ΄ν°λ₯Ό κ°μ Έμ€λ μν μ ν©λλ€. μΊμ ν€λ ν΄λΉ λ‘λκ° κ°μ Έμ¨ λ°μ΄ν°λ₯Ό κ³ μ νκ² μλ³νλ λ° μ¬μ©λ©λλ€. μ£Όμ΄μ§ ν€μ λν λ°μ΄ν°κ° μ΄λ―Έ μΊμμ μ‘΄μ¬νλ©΄ μ§μ μ 곡λ©λλ€. κ·Έλ μ§ μμΌλ©΄ λ‘λ ν¨μκ° μ€νλκ³ κ·Έ κ²°κ³Όκ° μ 곡λ ν€λ₯Ό μ¬μ©νμ¬ μΊμμ μ μ₯λ©λλ€.
experimental_useCacheμμ μΊμ ν€μ μν
experimental_useCacheμ λ§₯λ½μμ μΊμ ν€λ μΊμ± λ©μ»€λμ¦μ ν΅μ¬μ
λλ€. Reactλ μ΄λ₯Ό ν΅ν΄ μ΄λ€ λ°μ΄ν°κ° μμ²λκ³ μλμ§, κ·Έλ¦¬κ³ μΊμμμ μ 곡λ μ μλμ§ μ νν μ μ μμ΅λλ€.
μ μ μλ μΊμ ν€λ λ€μμ 보μ₯ν©λλ€:
- κ³ μ μ±: κ°κ°μ κ³ μ ν λ°μ΄ν° μμ²μ κ³ μ ν ν€λ₯Ό κ°μ§λλ€.
- κ²°μ μ±: λμΌν μ λ ₯ μ§ν©μ νμ λμΌν μΊμ ν€λ₯Ό μμ±ν΄μΌ ν©λλ€.
- κ΄λ ¨μ±: ν€λ κ°μ Έμ€λ λ°μ΄ν°μ μν₯μ λ―ΈμΉλ λͺ¨λ λ§€κ°λ³μλ₯Ό ν¬ν¨ν΄μΌ ν©λλ€.
experimental_useCacheλ₯Ό μ¬μ©ν ν¨κ³Όμ μΈ μΊμ ν€ κ΄λ¦¬ μ λ΅
κ²¬κ³ ν μΊμ ν€λ₯Ό λ§λλ κ²μ μμ μ
λλ€. experimental_useCacheμμ λμ
λ ν¨ν΄μ μ¬μ©νκ±°λ μμν λ μ¬μ©ν μ μλ λͺ κ°μ§ μ λ΅κ³Ό λͺ¨λ² μ¬λ‘λ λ€μκ³Ό κ°μ΅λλ€:
1. λͺ¨λ κ΄λ ¨ λ§€κ°λ³μ ν΅ν©νκΈ°
μ΄κ²μ΄ μΊμ ν€ κ΄λ¦¬μ ν©κΈλ₯ μ λλ€. λ‘λ ν¨μκ° λ°ννλ λ°μ΄ν°μ μν₯μ λ―ΈμΉλ λͺ¨λ λ§€κ°λ³μλ μΊμ ν€μ μΌλΆκ° λμ΄μΌ ν©λλ€. μ¬κΈ°μλ λ€μμ΄ ν¬ν¨λ©λλ€:
- 리μμ€ μλ³μ: μ¬μ©μ ID, μ ν ID, κ²μλ¬Ό μ¬λ¬κ·Έ λ±.
- 쿼리 λ§€κ°λ³μ: νν°, μ λ ¬ κΈ°μ€, νμ΄μ§λ€μ΄μ μ€νμ , κ²μμ΄.
- κ΅¬μ± μ€μ : API λ²μ , λ°μ΄ν°λ₯Ό λ³κ²½νλ κΈ°λ₯ νλκ·Έ.
- νκ²½λ³ λ°μ΄ν°: μΌλ°μ μΌλ‘ μ§μ μΊμ±μλ κΆμ₯λμ§ μμ§λ§, μ λμ μΌλ‘ νμν κ²½μ° λ°μ΄ν°λ₯Ό λ³κ²½νλ νΉμ νκ²½ ꡬμ±.
μμ : μ ν λͺ©λ‘ κ°μ Έμ€κΈ°
μ¬μ©μκ° μΉ΄ν
κ³ λ¦¬λ³λ‘ νν°λ§νκ³ , κ°κ²©μμΌλ‘ μ λ ¬νλ©°, νμ΄μ§λ₯Ό λλ μ μλ μ ν λͺ©λ‘ νμ΄μ§λ₯Ό μκ°ν΄ 보μΈμ. μμ§ν μΊμ ν€λ λ¨μν 'products'μΌ μ μμ΅λλ€. μ΄κ²μ λͺ¨λ μ¬μ©μκ° μ νν νν°λ νμ΄μ§λ€μ΄μ
μ κ΄κ³μμ΄ λμΌν μΊμλ λͺ©λ‘μ λ³΄κ² λλ―λ‘ μ¬μμ΄ λ κ²μ
λλ€.
λ λμ μΊμ ν€λ μ΄λ¬ν λͺ¨λ λ§€κ°λ³μλ₯Ό ν΅ν©νλ κ²μ λλ€. κ°λ¨ν λ¬Έμμ΄ μ§λ ¬νλ₯Ό μ¬μ©νλ κ²½μ°:
`products?category=${category}&sortBy=${sortBy}&page=${page}`
ꡬ쑰νλ ν€λ₯Ό μ¬μ©νλ κ²½μ° (볡μ‘ν μλ리μ€μμ μ’ μ’ λ μ νΈλ¨):
['products', { category, sortBy, page }]
μ νν νμμ experimental_useCache(λλ λ―Έλμ μμ μ μΈ API)κ° ν€λ₯Ό μ΄λ»κ² κΈ°λνλμ§μ λ°λΌ λ€λ₯΄μ§λ§, λͺ¨λ μ°¨λ³ν μμλ₯Ό ν¬ν¨νλ μμΉμ λμΌν©λλ€.
2. ꡬ쑰νλ μΊμ ν€ νμ©νκΈ°
λ¬Έμμ΄ ν€λ κ°λ¨νμ§λ§, 볡μ‘ν λ°μ΄ν°μ κ²½μ° λ€λ£¨κΈ° μ΄λ ΅κ³ κ΄λ¦¬νκΈ° νλ€μ΄μ§ μ μμ΅λλ€. λ§μ μΊμ± μμ€ν κ³Ό λ―Έλμ React ν¨ν΄μ μ’ μ’ λ°°μ΄μ΄λ κ°μ²΄λ‘ ννλλ ꡬ쑰νλ ν€μ μ΄μ μ λ릴 κ²μ λλ€.
- λ°°μ΄: μ λ ¬λ λ§€κ°λ³μ λͺ©λ‘μ μ μ©ν©λλ€. 첫 λ²μ§Έ μμλ 리μμ€ μ νμΌ μ μμΌλ©°, κ·Έ λ€μ μλ³μλ λ§€κ°λ³μκ° μ΅λλ€.
- κ°μ²΄: λ§€κ°λ³μ μ΄λ¦μ΄ μ€μνκ³ μμκ° μ€μνμ§ μμ μ μλ ν€-κ° μμ νμν©λλ€.
μμ : μ¬μ©μ μ νΈλ λ° λ°μ΄ν°
μ¬μ©μμ μ νΈλμ μν μ λ°λΌ λ€λ₯Έ μμ ―μ νμν μ μλ μ¬μ©μ λμ보λλ₯Ό κ°μ Έμ¨λ€κ³ μμν΄ λ³΄μΈμ. ꡬ쑰νλ ν€λ λ€μκ³Ό κ°μ μ μμ΅λλ€:
['userDashboard', userId, { theme: userTheme, role: userRole }]
μ΄ ν€λ 리μμ€(userDashboard), νΉμ μ¬μ©μ(userId), κ·Έλ¦¬κ³ λ³ν(theme, role)μ λͺ
ννκ² μλ³ν©λλ€. μλ₯Ό λ€μ΄ μ¬μ©μμ μν μ΄ λ³κ²½λ κ²½μ° μΊμμ νΉμ λΆλΆμ κ΄λ¦¬νκ³ λ¬΄ν¨ννκΈ°κ° λ μ¬μμ§λλ€.
3. κ΅μ ν(i18n) λ° νμ§ν(l10n) λͺ μμ μΌλ‘ μ²λ¦¬νκΈ°
μ μΈκ³ μ¬μ©μλ₯Ό λμμΌλ‘ νλ κ²½μ° μΈμ΄μ μ§μμ μ€μν λ§€κ°λ³μμ λλ€. λ°μ΄ν°κ° μΈμ΄ λλ μ§μμ λ°λΌ λ¬λΌμ§ λλ νμ μΊμ ν€μ μ΄λ₯Ό ν¬ν¨μν€μΈμ.
μμ : νμ§νλ μ ν μ€λͺ
μ ν μ€λͺ μ κ°μ Έμ€λ κ²½μ°:
['productDescription', productId, localeCode]
λ§μ½ μ ν μ€λͺ
μ΄ μμ΄(en-US)μ μΌλ³Έμ΄(ja-JP) μ¬μ΄μμ ν¬κ² λ€λ₯΄λ€λ©΄, κ°κ°μ λν΄ λ³λμ μΊμ νλͺ©μ΄ νμν©λλ€.
μ€ν κ°λ₯ν ν΅μ°°λ ₯: μ ν리μΌμ΄μ μ λ°μ κ±Έμ³ λ‘μΌμΌ μ½λλ₯Ό μ½κ² μ κ·Όν μ μκ³ μΌκ΄μ± μκ² μ μ§νλλ‘ i18n μμ€ν μ μ€κ³νμΈμ. μ΄λ κ² νλ©΄ μΊμ ν€μ κ°λ¨νκ² ν΅ν©ν μ μμ΅λλ€.
4. μκ° κΈ°λ° λ¬΄ν¨ν λ λͺ μμ 무ν¨ν κ³ λ €νκΈ°
experimental_useCacheλ ν€ κΈ°λ° κ²μμ μ€μ μ λμ§λ§, 무ν¨νλ₯Ό μ΄ν΄νλ κ²μ΄ μ€μν©λλ€. λ κ°μ§ μ£Όμ μ κ·Ό λ°©μμ΄ μμ΅λλ€:
- μκ° κΈ°λ° λ§λ£ (TTL - Time To Live): λ°μ΄ν°λ μ€μ λ κΈ°κ°μ΄ μ§λλ©΄ λ§λ£λ©λλ€. κ°λ¨νμ§λ§, μ λ°μ΄νΈκ° TTLλ³΄λ€ λ μμ£Ό λ°μνλ©΄ μ€λλ λ°μ΄ν°λ‘ μ΄μ΄μ§ μ μμ΅λλ€.
- λͺ μμ 무ν¨ν: κΈ°λ³Έ λ°μ΄ν°κ° λ³κ²½λ λ μΊμ νλͺ©μ μ κ·Ήμ μΌλ‘ μ κ±°νκ±°λ μ λ°μ΄νΈν©λλ€. μ΄λ λ 볡μ‘νμ§λ§ λ°μ΄ν°μ μ΅μ μ±μ 보μ₯ν©λλ€.
experimental_useCacheλ κ·Έ λ³Έμ§μ, λμΌν ν€λ‘ λ°μ΄ν°λ₯Ό λ€μ κ°μ Έμ€κ±°λ νλ μμν¬κ° λ°μ΄ν° λ³κ²½μ μ리λ λ©μ»€λμ¦μ μ 곡νλ κ²½μ° λͺ
μμ 무ν¨νμ κ°κΉμ΅λλ€. κ·Έλ¬λ νΉμ μ νμ λ°μ΄ν°μ λν΄μλ μλΉ μλ¨μΌλ‘ μ μ TTLμ ꡬννκ³ μΆμ μλ μμ΅λλ€.
μ€ν κ°λ₯ν ν΅μ°°λ ₯: λ§€μ° λμ μΈ λ°μ΄ν°(μ: μ£Όκ°)μ κ²½μ° μΊμ±μ νΌνκ±°λ λ§€μ° μ§§μ TTLμ μ¬μ©νμΈμ. λΉκ΅μ μ μ μΈ λ°μ΄ν°(μ: κ΅κ° λͺ©λ‘)μ κ²½μ°, λ κΈ΄ TTLμ΄λ κ΄λ¦¬μ μ λ°μ΄νΈ μ λͺ μμ 무ν¨νκ° μ ν©ν©λλ€.
5. μΌλ°μ μΈ ν€λ‘ μΈν κ³Όλν ꡬλ νΌνκΈ°
λ§μ λ°μ΄ν°λ₯Ό μΊμνκΈ° μν΄ λ§€μ° κ΄λ²μν ν€λ₯Ό μ¬μ©νκ³ μΆμ μ νΉμ΄ μμ μ μμ΅λλ€. μ΄λ μΊμ μ€μΌμΌλ‘ μ΄μ΄μ§κ³ 무ν¨νλ₯Ό μ λͺ½μΌλ‘ λ§λλλ€. μΌλ°μ μΈ μΊμ νλͺ©μ΄ 무ν¨νλλ©΄, μ€μ λ‘λ λ³κ²½μ μν₯μ λ°μ§ μμ λ°μ΄ν°κΉμ§ 무ν¨νλ μ μμ΅λλ€.
μμ : λͺ¨λ μ¬μ©μ λ°μ΄ν°λ₯Ό λ¨μΌ 'users' ν€ μλμ μΊμνλ κ²μ μΌλ°μ μΌλ‘ λμ μκ°μ
λλ€. κ° μ¬μ©μμ λ°μ΄ν°λ₯Ό κ³ μ ν 'user:{userId}' ν€ μλμ μΊμνλ κ²μ΄ ν¨μ¬ λ«μ΅λλ€.
μ€ν κ°λ₯ν ν΅μ°°λ ₯: μΈλΆνλ μΊμ ν€λ₯Ό λͺ©νλ‘ νμΈμ. λ λ§μ ν€λ₯Ό κ΄λ¦¬νλ μ€λ²ν€λλ μ’ μ’ μ λ°ν λ°μ΄ν° κ²μκ³Ό λͺ©ννλ 무ν¨νμ μ΄μ μΌλ‘ μμλ©λλ€.
6. ν€ μμ±μ λ©λͺ¨μ΄μ μ΄μ
μΊμ ν€κ° 볡μ‘ν λ‘μ§μ κΈ°λ°νμ¬ μμ±λκ±°λ λ°μ΄ν° μ체μλ μν₯μ μ£Όμ§ μμΌλ©΄μ μμ£Ό λ³κ²½λ μ μλ μνμμ νμλλ κ²½μ°, ν€ μμ± κ³Όμ μ λ©λͺ¨μ΄μ§νλ κ²μ κ³ λ €νμΈμ. μ΄λ λΆνμν ν€μ μ¬κ³μ°μ λ°©μ§νλ©°, μμ§λ§ λμ λλ μ±λ₯ ν₯μμ κ°μ Έμ¬ μ μμ΅λλ€.
reselect(Reduxμ©)λ Reactμ `useMemo`μ κ°μ λΌμ΄λΈλ¬λ¦¬κ° μ¬κΈ°μ λμμ΄ λ μ μμ§λ§, experimental_useCacheμ μ§μ μ μ©νλ κ²μ ν
μ ꡬν μΈλΆ μ¬νμ λ°λΌ λ¬λΌμ§λλ€.
7. λ°μ΄ν° μ κ·ννκΈ°
μ΄λ μΊμ±μ ν° λμμ΄ λλ λ λμ μν κ΄λ¦¬ μμΉμ λλ€. λ°μ΄ν° μ κ·νλ κΉμ μ€μ²©κ³Ό μ€λ³΅μ νΌνλ λ°©μμΌλ‘ λ°μ΄ν°λ₯Ό ꡬ쑰ννλ κ²μ μλ―Ένλ©°, μΌλ°μ μΌλ‘ μν°ν°λ₯Ό ννν ꡬ쑰μ IDλ₯Ό ν€λ‘ νμ¬ μ μ₯ν©λλ€. κ΄λ ¨ λ°μ΄ν°λ₯Ό κ°μ Έμ¬ λ, μ κ·νλ IDλ₯Ό μ¬μ©νμ¬ κΈ°μ‘΄ μν°ν°λ₯Ό μ°Έμ‘°ν¨μΌλ‘μ¨ μ€λ³΅μ νΌν μ μμ΅λλ€.
λ°μ΄ν°λ₯Ό μ κ·ννλ©΄ μΊμ ν€κ° μ΄λ¬ν μ κ·νλ μν°ν°λ₯Ό κ°λ¦¬ν¬ μ μμ΅λλ€. μλ₯Ό λ€μ΄, product μ 보λ₯Ό κΉκ² μ€μ²©νλ μ 체 orderDetails κ°μ²΄λ₯Ό μΊμνλ λμ , orderDetailsλ₯Ό μΊμνκ³ product μΈλΆ μ 보λ₯Ό λ³λλ‘ μΊμνλ©°, orderDetailsλ products μΊμμ productIdλ₯Ό μ°Έμ‘°ν μ μμ΅λλ€.
μμ :
{
products: {
'prod_123': { id: 'prod_123', name: 'Gadget', price: 19.99 },
'prod_456': { id: 'prod_456', name: 'Widget', price: 29.99 }
},
orders: {
'order_abc': { id: 'order_abc', items: ['prod_123', 'prod_456'], total: 49.98 }
}
}
order_abcμ λν μ£Όλ¬Έ μΈλΆ μ 보λ₯Ό κ°μ Έμ¬ λ, items λ°°μ΄μλ IDκ° ν¬ν¨λ©λλ€. prod_123κ³Ό prod_456μ΄ μ΄λ―Έ products μΊμμ μλ€λ©΄(λ°λΌμ μ κ·νλμλ€λ©΄), ν΄λΉ μΈλΆ μ 보λ₯Ό λ€μ κ°μ Έμ€κ±°λ λ€μ μΊμν νμκ° μμ΅λλ€. κ·Έλ¬λ©΄ μΊμ ν€ μ λ΅μ μ΄λ¬ν μ κ·νλ μν°ν°λ₯Ό κ²μνκ³ κ΄λ¦¬νλ λ° μ§μ€ν μ μμ΅λλ€.
8. λ°μ΄ν° λ―Όκ°λ λ° λ³΄μ κ³ λ €νκΈ°
μ§μ μ μΈ μΊμ ν€ κ΄λ¦¬ μ λ΅μ μλμ§λ§, ν€κ° μ무리 κ²¬κ³ νλλΌλ λ―Όκ°ν λ°μ΄ν°λ λΆμ£Όμνκ² μΊμλμ΄μλ μ λλ€λ μ μ κΈ°μ΅νλ κ²μ΄ μ€μν©λλ€. μΊμκ° μμλλ©΄ λ―Όκ°ν λ°μ΄ν°κ° λ ΈμΆλ μ μμ΅λλ€.
μ€ν κ°λ₯ν ν΅μ°°λ ₯: κ°μΈ μλ³ μ 보(PII), κΈμ΅ μ 보 λλ λ§€μ° λ―Όκ°ν μ격 μ¦λͺ μ μΊμ±μ νΌνμΈμ. λ§μ½ κ·Έλ¬ν λ°μ΄ν°λ₯Ό μΊμν΄μΌ νλ€λ©΄, μΊμ± κ³μΈ΅μ μ μ ν 보μ μ‘°μΉ(μ: μνΈν, μ κ·Ό μ ν)κ° μλμ§ νμΈνμΈμ.
μ€μ©μ μΈ κ΅¬ν κ³ λ €μ¬ν
μΊμ ν€ μ λ΅μ ꡬννκΈ° μμν λ, νΉν μ€νμ μΈ APIλ₯Ό μ¬μ©ν λλ λ€μ μ¬νλ€μ μΌλμ λμΈμ:
1. ν€ νμ μ ννκΈ°
React μ체λ experimental_useCache λ΄μμ μ νΈνλ μΊμ ν€ νμμ λν μ§μΉ¨μ μ 곡ν μ μμ΅λλ€. μΌλ°μ μΌλ‘ ꡬ쑰νλ νμ(λ°°μ΄μ΄λ κ°μ²΄ λ±)μ 볡μ‘ν μλ리μ€μμ μΌλ° λ¬Έμμ΄λ³΄λ€ λ κ²¬κ³ ν©λλ€. λ λμ λͺ
νμ±μ μ 곡νκ³ λͺ¨νΈμ±μ μ¬μ§λ₯Ό μ€μ¬μ€λλ€.
2. μΊμ λ¬Έμ λλ²κΉ νκΈ°
μΊμ±μ λ¬Έμ κ° λ°μνλ©΄ λλ²κΉ νκΈ°κ° μ΄λ €μΈ μ μμ΅λλ€. λ€μμ κ²μ¬ν μ μλ λꡬλ λ‘κΉ μ΄ μλμ§ νμΈνμΈμ:
- μ΄λ€ μΊμ ν€κ° μμ±λκ³ μλκ°?
- κ° ν€ μλμ μ΄λ€ λ°μ΄ν°κ° μ μ₯λκ³ μλκ°?
- λ°μ΄ν°κ° μΊμμμ κ°μ Έμμ§λ μμ λ λ€νΈμν¬μμ κ°μ Έμμ§λ μμ μ μΈμ μΈκ°?
- λ°μ΄ν°κ° μΊμμμ 무ν¨νλκ±°λ μ κ±°λλ μμ μ μΈμ μΈκ°?
λΈλΌμ°μ κ°λ°μ λꡬλ React DevToolsλ μ»΄ν¬λνΈ μνμ λ€νΈμν¬ μμ²μ κ²μ¬νλ λ° λ§€μ° μ μ©νλ©°, μ΄λ κ°μ μ μΌλ‘ μΊμ λμμ μ΄ν΄νλ λ° λμμ΄ λ©λλ€.
3. νμ λ° λ¬Έμν
μΊμ ν€ μ λ΅μ νΉν λκ·λͺ¨ κΈλ‘λ² νμμ μ λ¬Έμνλκ³ ν©μλμ΄μΌ ν©λλ€. κ°λ°μλ€μ λΆμΌμΉλ₯Ό νΌνκΈ° μν΄ ν€κ° μ΄λ»κ² νμ±λλμ§ λͺ ννκ² μ΄ν΄ν΄μΌ ν©λλ€. 리μμ€ μ΄λ¦ μ§μ λ° ν€ λ΄ λ§€κ°λ³μ ꡬ쑰νμ λν κ·μΉμ μ립νμΈμ.
4. λ―Έλ λλΉνκΈ°
experimental_useCacheλ μ€νμ μΈ κΈ°λ₯μ΄λ―λ‘ APIκ° λ³κ²½λ μ μμ΅λλ€. μΊμ ν€ κ΄λ¦¬μ κΈ°λ³Έ μ리λ₯Ό μ΄ν΄νλ λ° μ§μ€νμΈμ. λͺ¨λ κ΄λ ¨ λ§€κ°λ³μ ν¬ν¨, ꡬ쑰νλ ν€ μ¬μ©, κ΅μ ν μ²λ¦¬μ κ°μ κ°λ
μ 보νΈμ μ΄λ©°, λ―Έλμ μμ μ μΈ React APIλ μ±νν μ μλ λ€λ₯Έ μΊμ± μ루μ
μλ μ μ©λ κ²μ
λλ€.
κ²°λ‘
ν¨κ³Όμ μΈ μΊμ ν€ κ΄λ¦¬λ νΉν μ μΈκ³ μ¬μ©μλ₯Ό λμμΌλ‘ νλ κ³ μ±λ₯, νμ₯ κ°λ₯νλ©° μ λ’°ν μ μλ React μ ν리μΌμ΄μ μ ꡬμΆνλ μ΄μμ λλ€. νμν λͺ¨λ λ§€κ°λ³μλ₯Ό ν¬ν¨νλλ‘ μΊμ ν€λ₯Ό μΈμ¬νκ² λ§λ€κ³ , ꡬ쑰νλ νμμ νμ©νλ©°, κ΅μ ν, νμ§ν λ° λ°μ΄ν° μ κ·νλ₯Ό μΌλμ λ μΌλ‘μ¨ μ ν리μΌμ΄μ μ ν¨μ¨μ±μ ν¬κ² ν₯μμν¬ μ μμ΅λλ€.
experimental_useCacheκ° Reactμμ λ ν΅ν©λ μΊμ±μ ν₯ν ν₯λ―Έλ‘μ΄ λ¨κ³μ΄κΈ΄ νμ§λ§, 건μ ν μΊμ ν€ κ΄λ¦¬μ μμΉμ μμν©λλ€. μ΄λ¬ν μ λ΅μ μ±νν¨μΌλ‘μ¨ μ€λλ μ κ°λ° νκ²½μ μ΅μ νν λΏλ§ μλλΌ λ―Έλλ₯Ό μν΄ μ ν리μΌμ΄μ
μ μ€λΉνμ¬ μ μΈκ³ μ¬μ©μμκ² μ°μν κ²½νμ 보μ₯ν μ μμ΅λλ€.
Reactκ° κ³μ μ§νν¨μ λ°λΌ, μ€νμ μΈ κΈ°λ₯μ λν μ 보λ₯Ό μ»κ³ κ·Έ κΈ°λ³Έ κ°λ μ λ§μ€ν°νλ κ²μ΄ μ΅μ²¨λ¨ κ³ μ±λ₯ μΉ μ ν리μΌμ΄μ μ ꡬμΆνλ ν΅μ¬μ΄ λ κ²μ λλ€.